<template>
    <div class="box" style="margin-top: 100px;">
        <div class="inner">
            <div class="des">
                <div class="item">
                    <div>

                    </div>
                    <div>
                        免费下载
                    </div>
                    <div>
                        博客域名
                    </div>
                    <div>
                        免费课程
                    </div>
                    <div>
                        免费下载
                    </div>
                    <div>
                        打折
                    </div>
                    <div>
                        VIP特制图标
                    </div>
                    <div>
                        免费推送
                    </div>
                    <div>
                        有效时间
                    </div>
                    <div>
                        价格
                    </div>

                </div>
                <div @click="setMoney(199)" class="item">
                    <div>
                        VIP月卡
                    </div>
                    <div>
                        10次
                    </div>
                    <div>
                        <img src="../../assets/img/down-yes@2x.faa67c93.png" height="32" width="32"/>
                    </div>
                    <div>
                        <img src="../../assets/img/down-yes@2x.faa67c93.png" height="32" width="32"/>
                    </div>
                    <div>
                        <img src="../../assets/img/down-yes@2x.faa67c93.png" height="32" width="32"/>
                    </div>
                    <div>
                        8折
                    </div>
                    <div>
                           <img src="../../assets/img/down-no@2x.f005d78d.png" height="32" width="32"/>
                    </div>
                    <div>
                           <img src="../../assets/img/down-no@2x.f005d78d.png" height="32" width="32"/>
                    </div>
                    <div>
                        30天
                    </div>
                    <div>
                        ¥199.00元
                    </div>
                </div>
                <div @click="setMoney(299)" class="item">
                    <div>
                        VIP年卡
                    </div>
                    <div>
                        10次
                    </div>
                    <div>
                        <img src="../../assets/img/down-yes@2x.faa67c93.png" height="32" width="32"/>
                    </div>
                    <div>
                        <img src="../../assets/img/down-yes@2x.faa67c93.png" height="32" width="32"/>
                    </div>
                    <div>
                        <img src="../../assets/img/down-yes@2x.faa67c93.png" height="32" width="32"/>
                    </div>
                    <div>
                        7折
                    </div>
                    <div>
                           <img src="../../assets/img/down-no@2x.f005d78d.png" height="32" width="32"/>
                    </div>
                    <div>
                           <img src="../../assets/img/down-no@2x.f005d78d.png" height="32" width="32"/>
                    </div>
                    <div>
                        366天
                    </div>
                    <div>
                        ¥299.00元
                    </div>
                </div>
                <div @click="setMoney(399)" class="item">
                    <div>
                        超级VIP年卡
                    </div>
                    <div>
                        10次

                    </div>
                    <div>
                        <img src="../../assets/img/down-yes@2x.faa67c93.png" height="32" width="32"/>
                    </div>
                    <div>
                        <img src="../../assets/img/down-yes@2x.faa67c93.png" height="32" width="32"/>
                    </div>
                    <div>
                        <img src="../../assets/img/down-yes@2x.faa67c93.png" height="32" width="32"/>
                    </div>
                    <div>
                        7折
                    </div>
                    <div>
                           <img src="../../assets/img/down-no@2x.f005d78d.png" height="32" width="32"/>
                    </div>
                    <div>
                           <img src="../../assets/img/down-no@2x.f005d78d.png" height="32" width="32"/>
                    </div>
                    <div>
                        366天
                    </div>
                    <div>
                        ¥399.00元
                    </div>
                </div>
                <div @click="setMoney(499)" class="item">
                    <div>
                        SVIP两年卡
                    </div>
                    <div>
                        10次
                    </div>
                    <div>
                        <img src="../../assets/img/down-yes@2x.faa67c93.png" height="32" width="32"/>
                    </div>
                    <div>
                        <img src="../../assets/img/down-yes@2x.faa67c93.png" height="32" width="32"/>
                    </div>
                    <div>
                        <img src="../../assets/img/down-yes@2x.faa67c93.png" height="32" width="32"/>
                    </div>
                    <div>
                        6折
                    </div>
                    <div>
                           <img src="../../assets/img/down-no@2x.f005d78d.png" height="32" width="32"/>
                    </div>
                    <div>
                           <img src="../../assets/img/down-no@2x.f005d78d.png" height="32" width="32"/>
                    </div>
                    <div>
                        730天
                    </div>
                    <div>
                        ¥599.00元
                    </div>

                </div>
            </div>
        </div>
        <div class="inner2">
            <div class="pay">
                <span>实付金额</span>
                <span>{{money}}</span>
            </div>

                <form :action="this.payUrl" method="post" id="form">
                    <input style="display: none" type="text" name="goodNo" required v-model="no"><br/>
                    <input style="display: none" type="text" name="goodName" required v-model="name"><br/>
                    <input style="display: none" type="text" name="goodPrice" required v-model="money"><br/>
                    <input style="display: none" type="text" name="userId" required v-model="userId"><br/>
                    <input style="display: none" type="text" name="videoId" required v-model="videoId"><br/>
                    <input class="goToPay" type="submit" value="去支付">
                </form>

        </div>

    </div>

</template>

<script>
    import {request} from "../../network/request";
    import constant from "../../utils/constant";
    export default {
        name: "vip",
        data(){
            return{
                money:0,
                f:'',
                no:'',
                name:'',
                names:["vip30", "vip366", "svip366", "svip730"],
                userId: parseInt(sessionStorage.getItem("userId")),
                videoId:10,
                payUrl: constant.payUrl
            }
        },
        methods:{
            pay(){

            },
            setMoney(i){
                this.money = i;
                this.name = this.names[Math.floor(i/100) - 1];
            },
            uuid(len, radix) {
                var chars = '0123456789'.split('');
                var uuid = [],
                    i;
                radix = radix || chars.length;

                if (len) {
                    // Compact form
                    for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
                } else {
                    // rfc4122, version 4 form
                    var r;

                    // rfc4122 requires these characters
                    uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
                    uuid[14] = '4';

                    // Fill in random data.  At i==19 set the high bits of clock sequence as
                    // per rfc4122, sec. 4.1.5
                    for (i = 0; i < 36; i++) {
                        if (!uuid[i]) {
                            r = 0 | Math.random() * 16;
                            uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
                        }
                    }
        }

        return uuid.join('');
    }

         },
        created() {
            this.no = this.uuid(20,5);

        }
    }
</script>

<style scoped>
    #form{
        display: inline-block;
    }
    .goToPay{
        display: inline-block;
        width: 84px;
        height: 54px;
        background: #fc5531;
        border-radius: 4px;
        color: #fff;
        font-weight: bold;
        text-align: center;
        margin-top: 20px;
        margin-left: 20px;
        line-height: 54px;
        cursor: pointer;
        border: none;
    }
    .inner2{
        width: 1200px;
        margin: 0 auto;
    }
    .pay{

        width: 254px;
        height: 104px;
        background: #fc5531;
        border-radius: 4px;
        color: #fff;
        text-align: center;
        margin-top: 20px;
        display: inline-block;
    }
    .pay span:first-child{
        width: 100%;
        height: 32px;
        display: inline-block;
        text-align: center;
        font-size: 16px;
        font-family: PingFangSC-Medium,PingFang SC;
        font-weight: 500;
        color: #fff;
        line-height: 40px
    }
    .pay span:last-child{
        display: inline-block;
        width: 130px;
        height: 40px;
        font-size: 28px;
        font-family: PingFangSC-Semibold,PingFang SC;
        font-weight: 600;
        color: #fff;
        line-height: 40px;
    }
    .box{
        width: 100%;
    }
    .inner{

        width: 1200px;
        margin: 0 auto;
        font-size: 0;
    }
    .hover{
        height: 647px;
        border: 1px solid #f6daa2;
        border-radius: 4px;
        cursor: pointer;
        background: #fff!important;
        -webkit-box-shadow: 0 0 8px 0 rgba(187,148,68,.26);
        box-shadow: 0 0 8px 0 rgba(187,148,68,.26);
        /*-webkit-transform: scaleX(1.05);*/
        transform: scaleX(1.05);
        margin-top: -10px;
    }
    .nomal{
        display: block;
        width: 236px;
        height: 637px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        font-size: 16px;
        font-family: PingFangSC-Regular,PingFang SC;
        font-weight: 400;
        background-clip: content-box;
        border: 1px solid #e2e2e2;
        color: #555666;
        border-right: 0;
    }
    .dec{
        display: flex;
        width: 98%;
    }
    .item{
        flex: 1;
        width: 200px;
        margin: 0;
        height: 637px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        font-size: 16px;
        font-family: PingFangSC-Regular,PingFang SC;
        font-weight: 400;
        background-clip: content-box;
        border: 1px solid #e2e2e2;
        color: #555666;
        display: inline-block;
        border-right: 0;
    }
    .item:hover{

        border: 1px solid #f6daa2;
        border-radius: 4px;
        cursor: pointer;
        background: #fff!important;
        -webkit-box-shadow: 0 0 8px 0 rgba(187,148,68,.26);
        box-shadow: 0 0 8px 0 rgba(187,148,68,.26);
        -webkit-transform: scaleX(1.05);
        transform: scaleX(1.05);
        margin-top: -10px !important;
    }
    .item img{
        width: 16px;
        height: 16px;
    }
    .item:last-child{
        border-right: 1px solid #e2e2e2;

    }
    .item div:first-child{
        border-top: 0;
        font-weight: bold;

    }
    .item div{
        height: 63px;
        flex: 1;
        border-top: 1px solid #e2e2e2;
        font-size: 16px;
        font-family: PingFangSC-Regular,PingFang SC;
        font-weight: 400;
        color: #555666;
        position: relative;
        font-weight: 300;
        font-size: 16px;
        font-family: PingFangSC-Regular,PingFang SC;
        font-weight: 400;
        color: #555666;
        cursor: pointer;
        text-align: center;
        line-height: 63px;
    }
    .item div:last-child{
        color: #fc5531;
    }
    .item div:nth-child(9){
        color: #fc5531;
    }
</style>